import { CockpitChartBaseProps } from "../helps";
import React from "react";

export interface KxWorkerAgeStructurePieChart extends CockpitChartBaseProps {
  img?: any;
}
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";

export const getKxWorkerAgeStructurePieChartOption = ({
  dataSource = [],
}: KxWorkerAgeStructurePieChart): EChartsOption => {
  const color = ["#2CFFFF", "#986BF6", "#FFE347", "#FF9334", "#49FF6B"];
  const nameMap = dataSource.reduce<Record<string, number>>((memo, cur) => {
    if (cur.name) {
      memo[cur.name] = cur.amount || 0;
    }

    return memo;
  }, {});
  return {
    // backgroundColor: '#0a1a2a',
    legend: {
      selectedMode: false,
      orient: "vertical",
      itemWidth: 20,
      itemHeight: 8,
      itemGap: 22,
      icon: "circle",
      right: "15%",
      top: "center",

      formatter: function (name) {
        return "{a|" + name + "}{b|" + nameMap[name] + "%}";
      },
      textStyle: {
        fontSize: 14,
        color: "#fff",
        rich: {
          a: {
            color: "#ffffff",
            width: 75,
            fontSize: 14,
            align: "left",
            fontFamily: "Arial",
          },
          b: {
            color: "#ffffff",
            fontSize: 14,
            width: 56,
            fontFamily: "Arial",
          },
        },
      },
      data: dataSource.map((d) => d.name || ""),
    },
    series: [
      {
        name: "title",
        type: "pie",
        startAngle: 280,
        radius: ["67%", "74%"],
        center: ["28%", "50%"],
        label: {
          show: false,
          formatter: (params: any) => {
            return `
                           ${params.name}: ${params.percent}%
                           ${params.data.value}个
                           `;
          },
          padding: [0, -30],
          lineHeight: 25,
        },

        itemStyle: {},
        color: ["red"],
        data: dataSource.map((d, index) => ({
          value: d.amount || 0,
          name: d.name || "",
          itemStyle: {
            color: color[index],
          },
        })),
      },
      {
        name: "",
        type: "pie",
        startAngle: 280,
        radius: ["62%", "57%"],
        center: ["28%", "50%"],
        zlevel: 3,

        legendHoverLink: false,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },

        itemStyle: {
          borderColor: "#0a1a2a",
          borderWidth: 3,
          // ellipsis: {
          //   borderColor: '#0a1a2a',
          // },
        },
        tooltip: {
          show: false,
        },
        data: dataSource.map((d, index) => ({
          value: d.amount || 0,
          name: d.name || "",
          itemStyle: {
            color: color[index],
            opacity: 0.3,
          },
        })),
      },
      {
        name: "title",
        type: "pie",
        zlevel: 5,

        legendHoverLink: false,
        radius: ["79%", "80%"],
        center: ["28%", "50%"],
        label: {
          show: false,
          formatter: (params: any) => {
            return `
                           ${params.name}: ${params.percent}%
                           ${params.data.value}个
                           `;
          },
          padding: [0, -30],
          lineHeight: 25,
        },
        itemStyle: {
          shadowBlur: 15,
          shadowColor: "rgba(0, 0, 0, 0.3)",
          borderColor: "#284772",
          color: "#284772",
        },
        data: [
          {
            value: 41,
            name: "低级",
          },
        ],
      },
      {
        name: "title",
        type: "pie",
        zlevel: 5,

        legendHoverLink: false,
        radius: ["52%", "51%"],
        center: ["28%", "50%"],
        label: {
          show: false,
          formatter: (params: any) => {
            return `
                           ${params.name}: ${params.percent}%
                           ${params.data.value}个
                           `;
          },
          padding: [0, -30],
          lineHeight: 25,
        },
        itemStyle: {
          shadowBlur: 15,
          shadowColor: "rgba(0, 0, 0, 0.3)",
          borderColor: "#284772",
          color: "#284772",
        },
        data: [
          {
            value: 41,
            name: "低级",
          },
        ],
      },
    ],
    graphic: [
      {
        type: "group",
        left: "26%",
        top: "45%",
        children: [
          {
            type: "text",
            z: 100,
            top: "middle",
            style: {
              fill: "#FDFFFF",
              // text: '工种',
              fontSize: 18,
              // font: '48px Microsoft YaHei',
            },
          },
        ],
      },
    ],
  };
};

const KxWorkerAgeStructurePieChart = ({
  reactEChartsProps,
  dataSource,
}: KxWorkerAgeStructurePieChart) => {
  return (
    <ReactECharts
      {...reactEChartsProps}
      style={{
        height: "232px",
      }}
      option={getKxWorkerAgeStructurePieChartOption({
        dataSource,
      })}
    />
  );
};

export default KxWorkerAgeStructurePieChart;
